import '../styles/appleBasket.scss';
import Apple from './Apple'
import { observer } from 'mobx-react-lite'

function AppleBasket({store}) {
  let { existApples, currentApples, eatedApples, pickApple, pickText, isPicking} = store
  return (
    <div className="appleBusket">
      <div className="title">苹果篮子</div>

      <div className="stats">
        <div className="section">
          <div className="head">当前</div>
          <div className="content">{currentApples.number}个苹果，{currentApples.weight}克
          </div>
        </div>
        <div className="section">
          <div className="head">已吃掉</div>
          <div className="content">{eatedApples.number}个苹果，{eatedApples.weight}克</div>
        </div>
      </div>

      <div className="appleList">
        { getAppleItem(existApples) }
      </div>

      <div className="btn-div">
        <button className={isPicking ? 'disabled' : ''} onClick={pickApple} >{pickText}</button>
      </div>
    </div>
  );
}

function getAppleItem(existApples) {
  if (existApples.length > 0) {
    return existApples.map(apple => <Apple apple={apple} key={apple.id}></Apple>)
  } else {
    return <div className="empty-tip" key="empty">苹果篮子空空如也</div>
  }
}

export default observer(AppleBasket);
